/* section style */
.section {
  @apply py-24 xl:py-28;
}

.section-sm {
  @apply py-16 xl:py-20;
}

/* container */
.container {
  @apply mx-auto xl:!max-w-[1320px] px-4;
}

/* social icons */
.social-icons {
  @apply space-x-4;
}
.social-icons li {
  @apply inline-block;
}
.social-icons li a {
  @apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-text-dark;
}
.social-icons li a svg {
  @apply h-5 w-5;
}

/* notice */
.notice {
  @apply mb-6 rounded-lg border px-8 py-6;
}

.notice-head {
  @apply flex items-center;
}

.notice-head svg {
  @apply mr-3;
}

.notice-head p {
  @apply font-secondary text-xl font-semibold text-text-dark dark:text-darkmode-text-light;
}

.notice-body {
  @apply mt-3;
}

.notice-body p {
  @apply my-0;
}

.notice.note {
  @apply text-[#1B83E2];
  @apply border-current;
}

.notice.tip {
  @apply text-[#40D294];
  @apply border-current;
}

.notice.info {
  @apply text-[#E3A72C];
  @apply border-current;
}

.notice.warning {
  @apply text-[#DB2C23];
  @apply border-current;
}

/* tab */
.tab {
  @apply overflow-hidden rounded-lg border border-border dark:border-darkmode-border;
}

.tab-nav {
  @apply flex border-b border-border bg-light dark:border-darkmode-border dark:bg-darkmode-light !m-0 !list-none;
}

.tab-nav-item {
  @apply cursor-pointer border-b-[3px] border-border py-2 text-lg text-text-dark opacity-80 dark:border-darkmode-border !my-0 !px-8;
}

.tab-nav-item.active {
  @apply border-b-[3px] border-dark opacity-100 dark:border-darkmode-primary;
}

.tab-content {
  @apply px-5;
}

.tab-content-panel {
  @apply p-8;
}

.tab-content-panel p {
  @apply mb-0;
}

.tab-content-panel.active {
  @apply block;
}

/* accordion */
.accordion {
  @apply mb-6 overflow-hidden rounded-lg border border-border bg-light dark:border-darkmode-border dark:bg-darkmode-light;
}

.accordion-header {
  @apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-text-dark dark:bg-darkmode-light dark:text-darkmode-text-light;
}

.accordion-icon {
  @apply h-[.8em] w-[.8em] rotate-[-90deg] transition-transform duration-200;
}

.accordion-content {
  @apply max-h-0 overflow-hidden px-8 py-0;
}

.accordion.active .accordion-icon {
  @apply rotate-0;
}

.accordion.active .accordion-content {
  @apply max-h-screen;
}

/* modal */
.modal {
  @apply fixed inset-0 z-40 hidden h-full w-full overflow-auto;
}

.modal-overlay {
  @apply fixed inset-0 z-40 hidden h-full w-full bg-black/40;
}

.modal-content {
  @apply relative top-1/2 z-50 mx-auto max-w-[90%] -translate-y-1/2 rounded-lg bg-body p-8 dark:bg-darkmode-body;
}

.modal-close {
  @apply absolute right-3 top-3 h-8 w-8 rounded-full bg-light text-center leading-8 text-text-dark dark:bg-darkmode-light dark:text-darkmode-text-dark;
}

/* content style */
.content {
  @apply prose max-w-none;
  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-text-dark dark:prose-headings:text-darkmode-text-dark;
  @apply prose-h1:text-h1-sm md:prose-h1:text-h1;
  @apply prose-h2:text-h2-sm md:prose-h2:text-h2;
  @apply prose-h3:text-h3-sm md:prose-h3:text-h3;
  @apply prose-p:text-base prose-p:text-text dark:prose-p:text-darkmode-text;
  @apply prose-a:text-text prose-a:[&.btn]:no-underline  dark:prose-a:text-darkmode-text;
  @apply prose-img:max-w-full prose-img:rounded;
  @apply prose-strong:text-text-dark dark:prose-strong:text-darkmode-text;
  @apply prose-hr:border-border dark:prose-hr:border-darkmode-border;
  @apply prose-pre:rounded-lg prose-pre:bg-light dark:prose-pre:bg-darkmode-light;
  @apply prose-code:text-darkmode-text-dark;
  @apply prose-li:text-text dark:prose-li:text-darkmode-text;
  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-light dark:prose-blockquote:text-darkmode-text-light;
  @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:border-border prose-table:before:content-[""] dark:prose-table:before:border-darkmode-border;
  @apply prose-thead:border-border prose-thead:bg-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-light;
  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark dark:prose-th:text-darkmode-text;
  @apply prose-tr:border-border dark:prose-tr:border-darkmode-border;
  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] dark:prose-td:text-darkmode-text;
}
